<template>
    <el-form label-width="80px">
        <el-form-item label="SPU名称"> xxxxxx </el-form-item>
        <el-form-item label="SKU名称">
            <el-input placeholder="请你输入SKU名称" v-model="skuParams.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
            <el-input type="number" placeholder="价格(元)" v-model="skuParams.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
            <el-input type="number" placeholder="重量(千克)" v-model="skuParams.weight"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input type="textarea" placeholder="规格描述" v-model="skuParams.skuDesc"></el-input>
        </el-form-item>
        <!--平台属性-->
        <el-form-item label="平台属性">
            <!--行内form:因为一行放置多个select-->
            <el-form :inline="true">
                <el-form-item :label="attr.attrName" v-for="(attr, index) in attrArr" :key="attr.id">
                    <el-select v-model="attr.attrIdAndValueId">
                        <el-option :label="item.valueName" :value="`${attr.id}:${item.id}`"
                            v-for="(item, index) in attr.attrValueList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <!--行内form:因为一行放置多个select-->
            <el-form :inline="true">
                <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in saleArr" :key="saleAttr.id">
                    <el-select v-model="saleAttr.saleAttrIdAndValueId">
                        <el-option :label="item.saleAttrValueName" :value="`${saleAttr.id}:${item.id}`"
                            v-for="(item, index) in saleAttr.spuSaleAttrValueList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片名称">
            <el-table border :data="imgArr">
                <el-table-column width="80" type="selection"></el-table-column>
                <el-table-column label="图片">
                    <template #="{ row, $index }">
                        <img :src="row.imgUrl" alt="图片没了" style="width: 100px; height: 100px" />
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName"></el-table-column>
                <el-table-column label="操作">
                    <template #="{ row, $index }">
                        <el-button type="primary" size="small">默认</el-button>
                        <el-button type="info" size="small">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" size="default">保存</el-button>
            <el-button
        size="default"
        @click="emit('changeScene', { scenes: 0, flag: '' })"
        >取消</el-button
      >
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import {
    reqAttrList,
    reqSpuHasSaleAttr,
    reqImgList,
} from "../../../api/product/spu/spu";

import { ref } from "vue";
//存储平台属性
let attrArr = ref([]);
let saleArr = ref([]);
let imgArr = ref([]);

//收集添加SKU参数
let skuParams = ref({
    //父组件传递过来参数
    category3Id: 0, //三级分类的ID
    spuId: 0, //SPU的ID
    tmId: 0, //spu的品牌的ID

    //v-model收集
    skuName: "", //sku的名字
    price: 0, //sku的价格
    weight: "", //sku的重量
    skuDesc: "", //sku的描述


    skuDefaultImg: "", //默认图片地址
    skuAttrValueList: [
        //平台属性
        // {
        //   attrId: 0, //属性的id
        //   valueId: 0, //属性值的ID
        // },
    ],
    skuSaleAttrValueList: [
        //销售属性
        // {
        //   saleAttrId: 0,
        //   saleAttrValueId: 0,
        // },
    ],
});
const initSku = async (
    c1Id: string | number,
    c2Id: string | number,
    spu: any
) => {
    let result = await reqAttrList(c1Id, c2Id, spu.category3Id);
    let result1 = await reqSpuHasSaleAttr(spu.id);
    let result2 = await reqImgList(spu.id);
    //存储数据:平台属性
    attrArr.value = result;
    //存储数据:销售属性
    saleArr.value = result1;
    //照片墙
    imgArr.value = result2;
};
defineExpose({
    initSku,
});
 
 let emit = defineEmits(["changeScene"])
</script>

<style scoped>

</style>